<template>
  <div class="recharge">
    <div class="login_top flex">
      <div class="left_logo"></div>
      <div class="flex-1 flex flex-between-center">
        <p style="font-size:24px;padding-left:35px">充值中心</p>
        <div class="flex align-center">


        </div>
      </div>
    </div>
    <div style="background-color:#f5f5f5;padding:30px 0;">
      <div class="middle_content">
        <div class="flex align-center top_tip">
          <img style="width:53px;height:53px;margin-right:20px" src="../../assets/images/gold.png" alt="充值须知">
          <div class="flex-1" style="line-height:26px">
            <p>充值须知！</p>
            <p class="color-999">1. 充值金额不需要任何技术手续费，及时到账；<br />2. 您可以使用支付宝的付款方式来进行充值，充值金额可进行提现。<br />3. 单笔限额100-20000元。</p>
          </div>
        </div>
        <div class="form_wrap">
          <div class="flex flex-between-center info_wrap">
            <p class="flex align-center left">
              <img style="width:48px;height:48px;margin-right:18px" src="../../assets/images/account.png" alt="账号">
              充值账号：<span class="blue-font">{{ userName }}</span>
            </p>
            <p class="flex align-center right">
              <img style="width:27px;height:27px;margin-right:10px" src="../../assets/images/gold.png" alt="余额">
              <span class="color-666">当前余额：￥{{ balance }}</span>
            </p>
          </div>
          <div class="recharge_form">
            <div class="flex align-center form_item">
              <label>充值金额：</label>
              <div>
                <el-input placeholder="请输入充值金额" v-model="amount" @blur="changeMoneyInput()">
                </el-input>
                <span class="affix">元</span>
              </div>
            </div>
            <div class="flex align-center form_item">
              <label>充值方式：</label>
              <div>
                <p class="type_item active">
                  <img style="width:77px;height:26px" src="../../assets/images/alipay_type.jpg" alt="">
                  <span class="selected">
                    <img style="width:25px;height:21px;" src="../../assets/images/selected.png" alt="">
                  </span>
                </p>
              </div>
            </div>
          </div>
        </div>
        <div class="bottom_btn">
          <el-button type="primary" size="medium" @click="submit">确认充值</el-button>
        </div>
      </div>
    </div>

    <div class="login_footer">
      <!-- <a
        href="https://beian.miit.gov.cn"
        target="_blank"
      ></a> -->
    </div>
  </div>
</template>

<script>
import { getName } from "@/utils/auth";
import { myAccount, recharge, rechargeLease } from "@/api/account";
export default {
  data() {
    return {
      balance: 0,
      amount: ''
    }
  },
  methods: {
    changeMoneyInput() {
      const pattern = /^[0-9]+([.]{1}[0-9]{1,2})?$/; // 正数的正则表达式
      // 不符合正整数时
      if (!pattern.test(this.amount)) {
        // input 框绑定的内容为空
        this.amount = '';
      }
      
    },
    getData() {
      myAccount().then(res => {
        this.balance = res.balance;
      })
    },
    submit() {
      let url=window.location.href
      let urlStr = url.split('?')[1]
      const urlSearchParams = new URLSearchParams(urlStr)
      const result = Object.fromEntries(urlSearchParams.entries())
      console.log(result.id);
      if (!this.amount) {
        return;
      }
      if(result.id==0){
        recharge(this.amount).then(res => {
          const { out_trade_no, qr_code, log_id } = res;
          sessionStorage.setItem('amount', this.amount);
          sessionStorage.setItem('out_trade_no', out_trade_no);
          sessionStorage.setItem('qr_code', qr_code);
          sessionStorage.setItem('log_id', log_id);
          this.$router.push({ name: 'rechargeCode' });
        })
      }else{
        rechargeLease(this.amount).then(res => {
          const { out_trade_no, qr_code, log_id } = res;
          sessionStorage.setItem('amount', this.amount);
          sessionStorage.setItem('out_trade_no', out_trade_no);
          sessionStorage.setItem('qr_code', qr_code);
          sessionStorage.setItem('log_id', log_id);
          this.$router.push({ name: 'rechargeCode' });
        })
      }
      
    }
  },
  mounted() {
    this.getData();
  },
  computed: {
    userName() {
      return getName();
    }
  }
}
</script>

<style lang="scss" scoped>
.login_top {
  height: 75px;
  width: 1200px;
  margin: 0 auto;

  .left_logo {
    height: 48px;
    width: 172px;
    margin-top: 15px;
    background: url(../../assets/images/login_logo.png) no-repeat;
    background-size: 100%;
  }
}

.login_footer {
  text-align: center;
  font-size: 14px;
  font-family: Microsoft YaHei;
  font-weight: 400;
  color: #999999;
  text-decoration: none;
  padding: 20px 0;

  a:hover {
    color: #53a6ff;
  }
}

.middle_content {
  width: 1200px;
  margin: 0 auto;
  border-radius: 5px;
  background-color: #ffffff;
  border: 1px solid #e6e6e6;

  .top_tip {
    padding: 15px 40px;
    background: #fff6ed;
  }

  .form_wrap {
    padding: 30px 50px 50px;
    border-top: 1px solid #e6e6e6;
    border-bottom: 1px solid #e6e6e6;
  }

  .info_wrap {
    height: 80px;
    padding: 0 50px 0 20px;
    background: #f5f5f5;
  }
}

.form_item {
  margin: 30px 0 0 0;

  .el-input {
    width: 185px;
  }

  /deep/.el-input__inner {
    height: 45px;
    line-height: 45px;
    border-radius: 3px 0 0 3px;
  }

  .affix {
    display: inline-block;
    width: 45px;
    height: 45px;
    line-height: 45px;
    text-align: center;
    background-color: #eeeeee;
    border-radius: 0 3px 3px 0;
  }

  .type_item {
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
    width: 185px;
    height: 55px;
    text-align: center;
    border-radius: 3px;

    &.active {
      border: 1px solid #ff3d3d;
    }
  }

  .selected {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 2;
  }
}

.bottom_btn {
  padding: 20px 50px;
}
</style>